
/***
 *
 *   █████▒█    ██  ▄████▄   ██ ▄█▀       ██████╗ ██╗   ██╗ ██████╗
 * ▓██   ▒ ██  ▓██▒▒██▀ ▀█   ██▄█▒        ██╔══██╗██║   ██║██╔════╝
 * ▒████ ░▓██  ▒██░▒▓█    ▄ ▓███▄░        ██████╔╝██║   ██║██║  ███╗
 * ░▓█▒  ░▓▓█  ░██░▒▓▓▄ ▄██▒▓██ █▄        ██╔══██╗██║   ██║██║   ██║
 * ░██░   ▒▒█████▓ ▒ ▓███▀ ░▒██▒ █▄       ██████╔╝╚██████╔╝╚██████╔╝
 *  ▒ ░   ░▒▓▒ ▒ ▒ ░ ░▒ ▒  ░▒ ▒▒ ▓▒       ╚═════╝  ╚═════╝  ╚═════╝
 *  ░     ░░▒░ ░ ░   ░  ▒   ░ ░▒ ▒░
 *  ░ ░    ░░░ ░ ░ ░        ░ ░░ ░
 *           ░     ░ ░      ░  ░
 *
 *
 *  HUIB综合交流群：1003084383
 *  HUIB资源分享群：910387038
 *  QQ：2467226497
 *
 */


/* 拾色器界面 */
html,body{font-family:Microsoft YaHei;color:#fff;text-align: center;}a{text-decoration:none}
::selection{background:#ffffff;color:#000}::-moz-selection{background:#ffffff;color:#000}::-webkit-scrollbar {display: none;}
body{animation-name:example;animation-duration:0.6s;opacity:1;}
p,a,li,span,div{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-khtml-user-select:none;user-select:none;}
@keyframes example {from {opacity:0}to {opacity:1}}
li{list-style-type:none;background-repeat:no-repeat}div{background-repeat:no-repeat}button,input,a{outline:none}
input{border-radius:2px;border:1px solid #686868;background-color:transparent;color:#A0A0A0;padding:3px 6px;font-size:10px;text-align: center;width:60px}

.main{box-sizing:border-box;background-color: #252525;width:244px;height:460px;border-radius: 5px;padding:10px 10px;display:inline-block;position:relative;top:0;box-shadow:0 0 10px rgba(0,0,0,0.4);text-align:left;}

.header{margin:0px}.header p{margin:0;line-height: 10px;font-size:12px;pointer-events:none;}

.header li{width:10px;height:10px;margin-top:-11px;float:right;}#close{background-image: url("../img/close.svg");margin-top:-11px}#menu{background-image: url("../img/menu.svg");margin-right:18px}

.page-1{box-sizing:border-box;overflow:hidden;width:100%;height:96%;margin-bottom:4%}

.color-ring{width:180px;height:180px;margin:22px 10px 14px;border-radius:100%;text-align: center;}
#ctx{width:180px;height:180px;z-index:2;}

.color-a{width:37px;height:37px;background-color: #fff;border-radius: 100%;position:absolute;left:170px;top:4px}
.color-b{width:20px;height:20px;background-color: #fff;border-radius: 100%;position: absolute;left:188px;top:50px}
.color-hex{position:absolute;left:148px;top:170px;font-size:10px;width:48px;}
.slider-color{width:8px;height:8px;border: 1.5px solid #000;border-radius: 100%;display:inline-block;cursor: default!important;position:absolute;top:48%;left:48%;pointer-events:none;}

.slider{margin-bottom:20px;}
.slider p{font-size:12px;line-height:5px;color:#A0A0A0}
.slider2{width:70%}
.slider2 input{position:absolute;width:46px;right:-64px;top:-8px}
.block{width:100%;height:12px;border-radius: 2px;text-align: center;overflow: visible !important;}
.s{background-image:linear-gradient(to left,red, #fff)}
.l{background-image:linear-gradient(to right,black, #fff)}
.a{background-color: #414141;height:4px;text-align: left;}
.block li{background-image: url("../img/slider1.svg");width:8px;height:12px;display:inline-block;margin-top: 4px;background-size:contain;z-index: index 10 !important;cursor: default !important;}
.a li{margin-top:-4px}

.paint-box{display: inline-block;margin-top:8px;margin-left:4px}
.big{width:42px;height:42px;background-color:#252525;border: 1.1px solid #686868;border-radius: 3px;float:left;margin-right:4px}
.big:active,.color-a:active,.color-b:active{transform:scale(0.95);}
.mini{width:18px;height:18px;margin-bottom:4px}
.straw {text-align:center;}
.straw li{background-image: url("../img/target.svg");width:18px;height:18px;display:inline-block;position:relative;top:12px;pointer-events:none;}

.fg{background-color: rgb(102, 102, 102);width:90%;display:inline-block;height:0.5px;margin:4 0}
.zz{display:none;z-index: 998;width:100%;height:100%;background-color: rgba(0,0,0,0.1);left:0;top:0;position:absolute;}



/* 设置中心界面 */
.set{width:700px}

.set_nav{width:110px;height:100%;padding-top:28px;float:left}
.set_nav a{width:100%;display:block;text-align:center;float:left;color:#fff;border-radius:2px;margin-bottom:16px;padding:6px 0px;font-size:13px;}

.page_box{margin-bottom:40px}
.set_nav a[sel],.set_nav a:hover{background-color:#3355FF}
#page_set{width:calc(100% - 148px);height:calc(100% - 24px);float:left;margin-left:20px;overflow-y:scroll;overflow-x:hidden;margin-top:16px}
#page_set h1{font-size:13px;font-weight:normal;padding-bottom:6px;padding-left:2px}
#page_set .box-text{width:80%;}
#page_set p{font-size:13px;line-height:10px;color:rgba(255,255,255,0.9)}
#page_set .tab{font-size:10px;padding-bottom:4px;color:rgba(255,255,255,0.7)}
#page_set .box{background-color:#343434;width:100%;padding:6px 20px;box-sizing:border-box;border-radius:5px;margin-bottom:14px}
#page_set .set_switch{float:right;margin-top:-44px;padding-right:5px}
#page_set .el-switch{transform:scale(0.95)}

.el-switch__core{border:0.5px solid transparent!important;background-color:rgba(255,255,255,0.12);}
.el-switch__core,.el-switch__core::after{transition:0.15s!important;}
.is-checked .el-switch__core{background-color:#3355FF!important;}

.set_input{float:right;width:120px;margin-top:-50px}
.el-input__inner{background-color:#505050;color:#fff;border:none;line-height:38px}
.is-disabled>.el-input__inner{background-color:#505050!important;color:#fff!important}
